<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模拟路由</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      <!-- href中的 #/index我们称为hash值 -->
      <a href="#/index">主页</a>
      <a href="#/news">新闻</a>
      <a href="#/keji">科技</a>
      <a href="#/tiyu">体育</a>
      <!-- 为显示的组件提供占位符 -->
      <!-- componpent是vue提供的一个组件,可以理解为一个组件的占位符
           通过属性is指定当前显示的组件
      -->
      <component :is="componentName"></component>
    </div>
    <script>
      //声明相关的组件
      const index = {
        template: `<h1>主页内容</h1>`,
      };
      const news = {
        template: `<h1>新闻内容</h1>`,
      };
      const keji = {
        template: `<h1>科技内容</h1>`,
      };
      const tiyu = {
        template: `<h1>体育内容</h1>`,
      };
      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {
          componentName: "index",
        },
        components: {
          index,
          news,
          keji,
          tiyu,
        },
      });

      //使用原生的js实习对于hash值得监听
      window.onhashchange = function () {
        //如何获得最新得hash值,通过location.hash
        console.log(location.hash);
        switch (location.hash) {
          case "#/index":
            vm.componentName = "index";
            break;
          case "#/news":
            vm.componentName = "news";
            break;
          case "#/keji":
            vm.componentName = "keji";
            break;
          case "#/tiyu":
            vm.componentName = "tiyu";
            break;
        }
      };
    </script>
  </body>
</html>
